<!-- 账号信息页面 -->
{% extends "base.html" %}
{% block title %}账号管理{% endblock %}
{% block content %}
<link rel="stylesheet"  type="text/css" href="{{ url_for('static', filename='css/button.css') }}">
<link rel="stylesheet"  type="text/css" href="{{ url_for('static', filename='css/form_group.css') }}">
<style>
    body {
        background-color: #f7f7f7;
    }
    .container {
        max-width: 800px;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .card-header {
        background-color: #007bff;
        color: white;
    }
    .username {
        font-size: 18px;
        font-weight: bold;
        border-top: none;
    }
    /* 隐藏默认的对话框 */
    dialog {
        display: none;
    }
    /* 当对话框可见时显示 */
    dialog[open] {
        display: block;
        position: fixed;
        top: 55%;
        left: 20%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        width: 260px;
        max-width: 90%;
        z-index: 1000;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    dialog p {
        font-family: Arial, sans-serif; /* 设置字体家族 */
        font-size: 14px; /* 设置字体大小 */
        font-weight: bold; /* 设置字体粗细 */
        font-style: normal; /* 设置字体样式 */
        margin: 0 0 15px;
    }
    dialog button[value='error'] {
        background-color: #e74c3c;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
    }
    dialog button[value='success'] {
        background-color: #008CBA;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
    }
    dialog button:hover[value='error'] {
        background-color: #c0392b;
    }
    dialog button:hover[value='success'] {
        background-color: #4CAF50;
    }
</style>
{%- if success_message %}
<dialog open>
    <p>{{ success_message }}</p>
    <button value="success" onclick="closeAndRedirect()">关闭</button>
</dialog>
{%- endif %}
<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h2>用户信息</h2>
        </div>
        <div class="card-body">
            <p class="username">用户名: {{ user.username }}</p>
            <p class="username">角色: {{ user.role.value }}</p>
            <a href="/logout" class="btn btn-sm custom-del-btn">退出登录</a>
        </div>
        {%- if error_message %}
        <dialog open>
            <p>{{ error_message }}</p>
            <button value="error" onclick="this.parentNode.close()">关闭</button>
        </dialog>
        {%- endif %}
        <div class="card-header">
            <h2>修改密码</h2>
        </div>
        <div class="card-footer">
            <form action="/user" method="post">
                <div class="little-form-group">
                    <label for="current_password">当前密码:</label>
                    <input type="password" id="current_password" name="current_password" placeholder="输入当前密码" required>
                </div>
                <div class="little-form-group">
                    <label for="new_password">新密码:</label>
                    <input type="password" id="new_password" name="new_password" placeholder="输入新密码" required>
                </div>
                <div class="little-form-group">
                    <label for="confirm_password">确认密码:</label>
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="再次输入新密码" required>
                </div>
                <button type="submit" class="save_password">保存密码</button>
            </form>
        </div>

      </div>
    </div>
  </div>
</div>

<script>
    function closeAndRedirect() {
        const dialog = document.querySelector('dialog');
        if (dialog) {
            dialog.close();
        }
        window.location.href = "{{ url_for('login') }}";
    }
</script>

{% endblock %}